<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="<c:url value="/resources/css/main.css" />">
        <sec:authorize access="hasRole('ROLE_ADMIN')">
            <link rel="stylesheet" href="<c:url value="/resources/css/admin.css" />">
        </sec:authorize>
        <link href="<c:url value="/resources/css/datepicker3.css" />" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="<c:url value="/resources/js/bootstrap.min.js" />"></script>
        <script src="<c:url value="/resources/js/bootstrap-datepicker.js" />"></script>
        <script src="<c:url value="/resources/js/scripts.js" />"></script>
        <title><sitemesh:write property='title'/></title>
    <sitemesh:write property='head'/>
</head>

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="<c:url value="/rental/index.html"/>"><fmt:message key="webtitle" /></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="<c:url value="/rental/index"/>"><fmt:message key="rentals" /></a></li>
                    <li><a href="<c:url value="/machine/index"/>"><fmt:message key="machines" /></a></li>
                    <li><a href="<c:url value="/customer/index"/>"><fmt:message key="customers" /></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <sec:authorize access="hasRole('ROLE_ADMIN')">
                        <li><a href="<c:url value="/useradministration/index"/>"><fmt:message key="logins" /></a></li>
                        </sec:authorize>
                    <li><a href="<c:url value="/logout"/>"><fmt:message key="login.logout" /></a></li>
                </ul>
            </div>
        </div>
    </nav>

<sitemesh:write property='body'/>

<!-- Datepicker init-->
<script>
    $('#datepicker, #datepicker2').datepicker({
        format: 'mm/dd/yy',
        autoclose: true
    }).on("changeDate", function() {
        var date = $('#datepicker').val();
        $('#datepicker').attr("value", date);
    });
</script>
<script>
    $(document).ready(function() {
        $('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
                .closest('li').addClass('active');
    });
</script>

<sec:authorize access="hasRole('ROLE_ADMIN')">
    <div id="watermark">
        <p>Admin</p>
    </div>
</sec:authorize>
</body>
</html>
